/**
 * @description 组件样式
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
 */
.pure-badge {
    width: var(--pure-badge-width, auto);
    height: var(--pure-badge-height, 2em);
    padding: var(--pure-badge-padding, 0 0.75em);
    border-radius: var(--pure-badge-border-radius, 1000px);
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: var(--pure-badge-font-size, 0.8em);
    color: var(--pure-badge-color);
    border: var(--pure-badge-border-width, 0) var(--pure-badge-border-style, solid) var(--pure-badge-border-color, currentColor);
    position: relative;
    overflow: hidden;
    top: var(--pure-badge-top, 0);
    right: var(--pure-badge-right, 0);
    bottom: var(--pure-badge-bottom, auto);
    left: var(--pure-badge-left, auto);
    z-index: var(--pure-badge-z-index, 1);
    transform: var(--pure-badge-transform);
    line-height: 1;

    &--absolute {
        position: absolute;
    }

    &::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        background: var(--pure-badge-background, var(--pure-background-light));
    }

    &__text {
        position: relative;
        z-index: 2;
    }

    &--dot {
        width: var(--pure-badge-dot-size, 6px);
        height: var(--pure-badge-dot-size, 6px);
        padding: var(--pure-badge-padding, 0);
        border-radius: var(--pure-badge-dot-radius, 50%);
    }

    &--theme {
        color: var(--pure-badge-color, #ffffff);

        &::before {
            background: var(--pure-badge-background, var(--pure-badge-theme-value));
        }
    }

    &--ghost {
        color: var(--pure-badge-color, var(--pure-badge-theme-value));
        border-color: var(--pure-badge-border-color, var(--pure-badge-theme-value, currentColor));
        border-width: var(--pure-badge-border-width, 1px);

        &::before {
            opacity: var(--pure-badge-background-opacity, 0.2);
        }
    }

    &--plain {
        color: var(--pure-badge-color, var(--pure-badge-theme-value));
        border-color: var(--pure-badge-border-color, var(--pure-badge-theme-value, currentColor));
        border-width: var(--pure-badge-border-width, 1px);

        &::before {
            opacity: var(--pure-badge-background-opacity, 0);
        }
    }
}
